<template>
    <el-dialog v-model="dialogVisible" width="80%" title="日志详情" destroy-on-close center>
        <template #default>
            <el-descriptions title="日志详情" border >
                <el-descriptions-item label="日志时间">{{optionLog.createTime}}</el-descriptions-item>
                <el-descriptions-item label="操作模块">{{optionLog.module}}</el-descriptions-item>
                <el-descriptions-item label="请求地址">{{optionLog.requestUrl}}</el-descriptions-item>
                <el-descriptions-item label="操作用户">{{optionLog.user.username}}</el-descriptions-item>
                <el-descriptions-item label="请求方式">{{optionLog.requestMethod}}</el-descriptions-item>
                <el-descriptions-item label="操作方法">{{optionLog.optionMethod}}</el-descriptions-item>
                <el-descriptions-item :span="3" label="请求参数">{{optionLog.requestParam}}</el-descriptions-item>
                <el-descriptions-item :span="3" label="响应结果">{{optionLog.responseResult}}</el-descriptions-item>
            </el-descriptions>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="20"></el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="closeWin">关闭</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import {watch} from "vue";
import optionLogRequest from '../../../api/option-log.js';


export default {
    props:["visible","logId"],// 属性
    emits:["optionCompleted"],// 暴漏的事件
    name: "log-detail.vue",
    data(){
        return{
            dialogVisible: false, // 弹窗标记
            optionLog:{},// 当前编辑的日志对象
            currentLogId:-1,// 当前编辑的日志id
        }
    },methods:{

        /**
         * 关闭当前的窗体
         */
        closeWin(){
            // 通知父窗体，操作完成
            this.$emit("optionCompleted");
        },
        loadLog(){
            console.log("logId",this.logId)
            optionLogRequest.getById(this.logId,res=>{
                this.optionLog = res.data;
            })
        }
    },mounted(props) {
        //this.loadDictItems();
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
            if(this.dialogVisible){
                this.loadLog();
            }
        });
        watch(()=>this.logId,(newVal,oldVal)=>{
            this.currentLogId = newVal;
            if(this.dialogVisible){
                this.loadLog();
            }
        });
    }
}
</script>

<style scoped>

</style>